.container {
  width: 100%;
  padding: 100px 0 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  $boxWidth: 400px;
  $boxHeight: 400px;
  $defaultCropBoxWidth: 150px;
  $defaultCropBoxHeight: 150px;
  $dotWidth: 6px;

  .leftBox {
    width: $boxWidth;
    height: $boxHeight;
    border: 1px solid #000;
    position: relative;

    @mixin img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -webkit-user-drag: none !important;
      user-select: none;
    }

    .img1 {
      @include img;
      opacity: 0.5;
    }

    .img2 {
      @include img;
      clip: rect(0, $defaultCropBoxWidth, $defaultCropBoxHeight, 0);
    }

    .cropBox {
      position: absolute;
      left: 0;
      top: 0;
      width: $defaultCropBoxWidth;
      height: $defaultCropBoxHeight;
      border: 1px solid #fff;
      cursor: all-scroll;

      $halfDotWidth: calc($dotWidth / -2);

      .dot {
        position: absolute;
        width: $dotWidth;
        height: $dotWidth;
        background-color: #fff;
      }

      .leftUp {
        top: $halfDotWidth;
        left: $halfDotWidth;
        cursor: nw-resize;
      }
      .up {
        top: $halfDotWidth;
        left: 50%;
        margin-left: $halfDotWidth;
        cursor: n-resize;
      }
      .rightUp {
        top: $halfDotWidth;
        right: $halfDotWidth;
        cursor: ne-resize;
      }
      .right {
        top: 50%;
        margin-top: $halfDotWidth;
        right: $halfDotWidth;
        cursor: e-resize;
      }
      .rightDown {
        bottom: $halfDotWidth;
        right: $halfDotWidth;
        cursor: se-resize;
      }
      .down {
        bottom: $halfDotWidth;
        left: 50%;
        margin-left: $halfDotWidth;
        cursor: s-resize;
      }
      .leftDown {
        bottom: $halfDotWidth;
        left: $halfDotWidth;
        cursor: sw-resize;
      }
      .left {
        top: 50%;
        margin-top: $halfDotWidth;
        left: $halfDotWidth;
        cursor: w-resize;
      }
    }
  }

  .rightBox {
    width: $boxWidth;
    height: $boxHeight;
    margin-left: 50px;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      position: absolute;
      clip: rect(0, $defaultCropBoxWidth, $defaultCropBoxHeight, 0);
      -webkit-user-drag: none !important;
      user-select: none;
    }
  }
}
